<%--
  Created by IntelliJ IDEA.
  User: 86185
  Date: 2024/5/14
  Time: 17:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
    <head>
        <!-- 指定字符集 -->
        <meta charset="utf-8">
        <!-- 使用Edge最新的浏览器的渲染方式 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
        width: 默认宽度与设备的宽度相同
        initial-scale: 初始的缩放比，为1:1 -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>用户信息管理系统</title>

        <!-- 1. 导入CSS的全局样式 -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
        <script src="js/jquery-2.1.0.min.js"></script>
        <!-- 3. 导入bootstrap的js文件 -->
        <script src="js/bootstrap.min.js"></script>
        <style type="text/css">
            td, th {
                text-align: center;
            }
            #img {
                width: 100px;
            }
        </style>
        <script>
            window.onload = function(){
                var del = document.getElementById("deleteAll");
                del.onclick = function(){
                    //需要判断是否有复选框被选中
                    var ids = document.getElementsByName("ids");
                    var flag = false;
                    for(var i = 0;i<ids.length;i++){
                        //只需要判断至少有一个复选框被选中
                        if(ids[i].checked == true){
                            flag = true;//改变标记
                            break;//结束循环
                        }
                    }
                    if(flag == true){
                        if(confirm("您确定删除吗？")){
                            var form = document.getElementById("form");
                            console.log("123");
                            form.submit();
                        }
                    }else{
                        alert("请先选中条目！！");
                    }
                };

                //全选
                var selectAll = document.getElementById("selectAll");
                selectAll.onclick = function(){
                    //所有复选框
                    var ids = document.getElementsByName("ids");

                    for(var i = 0;i<ids.length;i++){
                        ids[i].checked = selectAll.checked;
                    }
                };

                /*var selectGoods = document.getElementById("selectGoods");
                selectGoods.onclick = function () {
                    var name = document.getElementById("name").value;
                    var selectState = document.getElementById("selectState").value;

                    selectGoods.href = "SelectGoodsServlet?name=" + name + "&selectState=" + selectState;
                }*/
            }
        </script>
    </head>
    <body>
        <div class="container">
            欢迎<span style="color: red">【${username}】</span>登录
            <a href="EscServlet" onclick="return confirm('您确定退出吗？')">安全退出</a>

            <h3 style="text-align: center">商品信息列表</h3>

            <%--<label class="sr-only" for="name">名称</label>
            <input type="text" style="width: 300px; display: inline" class="form-control" id="name" placeholder="请输入名称">
            <select class="form-control" style="width: 150px; display: inline" id="selectState">
                <option value="-1" hidden selected disabled>请选择商品</option>
                <option value="0">礼包专区</option>
                <option value="1">促销专区</option>
                <option value="2">轮播专区</option>
            </select>
            <a class="btn btn-primary glyphicon glyphicon-search" href="" id="selectGoods" style="margin-bottom: 5px">搜索商品</a>--%>

            <form action="SelectGoodsServlet" method="get">
                <label class="sr-only" for="name">名称</label>
                <input name="name" type="text" style="width: 300px; display: inline" class="form-control" id="name" placeholder="请输入名称" value="${name}">
                <select name="selectState" class="form-control" style="width: 150px; display: inline" id="selectState">
                    <c:if test="${empty selectState}">
                        <option value="-1" hidden selected disabled>请选择商品</option>
                        <option value="0">礼包专区</option>
                        <option value="1">促销专区</option>
                        <option value="2">轮播专区</option>
                    </c:if>
                    <c:if test="${selectState == -1}">
                        <option value="-1" hidden selected disabled>请选择商品</option>
                        <option value="0">礼包专区</option>
                        <option value="1">促销专区</option>
                        <option value="2">轮播专区</option>
                    </c:if>
                    <c:if test="${selectState  == 0}">
                        <option value="-1">请选择商品</option>
                        <option value="0" selected>礼包专区</option>
                        <option value="1">促销专区</option>
                        <option value="2">轮播专区</option>
                    </c:if>
                    <c:if test="${selectState == 1}">
                        <option value="-1">请选择商品</option>
                        <option value="0">礼包专区</option>
                        <option value="1" selected>促销专区</option>
                        <option value="2">轮播专区</option>
                    </c:if>
                    <c:if test="${selectState == 2}">
                        <option value="-1">请选择商品</option>
                        <option value="0">礼包专区</option>
                        <option value="1" >促销专区</option>
                        <option value="2" selected>轮播专区</option>
                    </c:if>
                </select>
                <input type="submit" class="btn btn-primary glyphicon glyphicon-search" href="" id="selectGoods" style="margin-bottom: 5px" value="搜索商品">
            </form>

            <div style="float: right; margin-bottom: 7px">
                <a class="btn btn-primary glyphicon glyphicon-play" href="GetAllOrdersServlet">订单管理界面</a>
                <a class="btn btn-primary glyphicon glyphicon-plus" href="addGoods.jsp">添加商品</a>
                <a class="btn btn-danger glyphicon glyphicon-trash" href="javascript:void(0)" id="deleteAll" >批量删除</a>
            </div>
            <form id="form" action="DeleteGoodsServlet" method="post">
                <table border="1" class="table table-bordered table-hover table table-striped">
                    <tr class="success">
                        <th><input type="checkbox" id="selectAll"> </th>
                        <th>编号</th>
                        <th>名称</th>
                        <th>规格</th>
                        <th>价格</th>
                        <th>图片</th>
                        <th>产地</th>
                        <th>库存</th>
                        <th>状态</th>
                        <th>简介</th>
                    </tr>
                    <c:forEach items="${goodsList}" var="goods" varStatus="status">
                        <tr>
                            <td><input type="checkbox" name="ids" value="${goods.id}"> </td>
                            <td>${status.index + 1}</td>
                            <td>${goods.goodsName}</td>
                            <td>${goods.goodsUnit}</td>
                            <td>${goods.goodsPrice}</td>
                            <td><img src="${goods.goodsImg}" id="img"></td>
                            <td>${goods.goodsAddress}</td>
                            <td>${goods.num}</td>
                            <td>
                                <c:if test="${goods.state == 0}">礼包专区</c:if>
                                <c:if test="${goods.state == 1}">促销专区</c:if>
                                <c:if test="${goods.state == 2}">轮播专区</c:if>
                            </td>
                            <td>
                                <a href="GetGoodsByIdServlet?id=${goods.id}" class="btn btn-warning glyphicon glyphicon-pencil">修改</a>
                                <a href="DeleteGoodsServlet?ids=${goods.id}" class="btn btn-danger glyphicon glyphicon-trash" id="delete" onclick="return confirm('您确定删除吗？')">删除</a>
                            </td>
                        </tr>
                    </c:forEach>
                </table>
            </form>
        </div>
    </body>
</html>


